<template>
  <div class="page-search-change-btn">
    <p class="el-dropdown-link" @click="handleChange">
      <span>{{ searchStatus ? '收起' : '展开' }}</span>
      <el-icon>
        <ArrowUp v-if="searchStatus" />
        <arrow-down v-else />
      </el-icon>
    </p>
  </div>
</template>

<script setup lang="ts" name="PageSearchChangeBtn">
// 定义 props
const prop = defineProps<{
  searchStatus: boolean
}>()

interface EmitProps {
  (e: 'searchStatusChange', searchStatus: boolean): void
}

// 抛出事件
const emit = defineEmits<EmitProps>()
const handleChange = () => {
  emit('searchStatusChange', !prop.searchStatus)
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
